<template>
    <div>
        <Top :title="title"></Top>
        <section>
            <div class="login">
                <form>
                    <div class="account">
                        <input type="text" placeholder="输入手机号/邮箱" v-model="account">
                        <p></p>
                    </div>
                    <div class="pwd">
                        <input type="password" placeholder="输入密码/验证码" v-model="userpwd">
                        <p></p>
                    </div>
                    <button class="btn-login" @click="login">登录</button>
                </form>
            </div>
        </section>
    </div>
</template>

<script>
    import Top from '../Top.vue';
    import $ from 'jquery';
    export default{
        data:function(){
           return{
                title:'登录',
                account:'',
                userpwd:''
           }
        },
        methods:{
            login: function() {
                if(this.account!='' && this.userpwd!=''){
                    var url = 'http://localhost:3000/users/login?username=' + this.account + '&pwd=' + this.userpwd;
                    $.get(url, function(res) {
                        if (res && res.code == 0) {
                            // 成功
                            alert(res.msg);
                            window.location.href='http://localhost:8080/?#/index';
                        } else {
                            // 失败
                            alert(res.msg);                        
                        }
                    })
                }else{
                    alert('用户名或密码都不能为空！');
                }
            }          
        },
        components:{
            Top
        }
    }
</script>

<style scoped>
    section{
        position:absolute;
        top:0.5rem;
        min-height: 100%;
        width: 100%;
        background-color: #f6f6f6;
    }
    .login form{
        padding: 0 0.31rem;
    }
    form>div{
        margin-top:0.3rem;
        position:relative;
    }
    form>div input{
        border: none;
        background-color: #f6f6f6;
        outline: none;
        display: block;
        width: 100%;
        height: 0.34rem;
        padding: 0.06rem 0.12rem;
        font-size: 0.14rem;
        line-height: 1.4;
        color: #555;
        box-sizing:border-box;
    }
    form>div p{
        position: absolute;
        top: 0.2rem;
        height: 0.12rem;
        width: 100%;
        border: solid #c4c4c4;
        border-width: 0 1px 1px 1px;
        box-sizing:border-box;
    }
    form .btn-login{
        display:block;
        margin:0 auto;
        width: 1.63rem;
        background-color: #fe8233;
        color: #fff;
        border: none;
        border-radius: 0.36rem;
        margin-top: 0.6rem;
        padding: 0.08rem 0.12rem;
        font-size: 0.16rem;
        outline: none;
    }
</style>